<script setup>
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import { getCartAPI, delFromCartAPI, modfifyCollctionAPI } from '@/apis/cart'
import { getTolPriceAPI } from '@/apis/order';
import { useCartStore } from '@/stores/cartStore';
import { useOrderStore } from '@/stores/orderStore';
import { useUserStore } from '@/stores/userStore';
import { usePayStore } from '@/stores/payStore'
import { previewOrderAPI } from '@/apis/order';
import { ElMessage, ElTable } from 'element-plus'
import { ElMessageBox } from 'element-plus';
const userInfo = useUserStore().userInfo;
const route = useRouter()


const cartList = ref([])
const cart = ref(null)
const getCart = async () => {
    const res = await getCartAPI(userInfo.data.uid);
    cartList.value = res.data;

}
onMounted(() => {
    getCart()
})

const selection = ref([])

const handleSelect = async () => {
    selection.value = cart.value.getSelectionRows()
    useCartStore().modifySelection(cart.value.getSelectionRows());
    const res = await getTolPriceAPI(selection.value);
    tolPrice.value = res.data;
}
const tolPrice = ref(0.00)
const delFromCart = (gid) => {
    ElMessageBox.confirm('确定删除吗?', '信息',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        await delFromCartAPI(userInfo.data.uid, gid);
        getCart()
    }).catch(() => { })
}
const changeCount = async (gid, count) => {
    await modfifyCollctionAPI(userInfo.data.uid, gid, count);
    getCart()
}
const createOrder = async () => {
    await usePayStore().getOrderCache(selection.value);
    usePayStore().setLastPage(1);
    route.replace({ path: '/pay' })
}
</script>
<template>
    <el-container>
        <el-header
            style="text-align: center; bcart-top-right-radius: 5px;bcart-top-left-radius: 5px; background-color: black;padding: 0px;height: 50px;color:#cdcdcd;">
            <el-link :underline="false" style="position:fixed;top:20px;left: 20px;"
                @click="route.replace({ path: '/home' })">&lt;首页</el-link>
            <p style="display: inline-block;margin-block-start: 11px;margin-block-end: 0;">
                我的购物车
            </p>
        </el-header>
        <el-main style="position: relative;">
            <el-container style="box-shadow:0 10px 5px 5px #cdcdcd ;height:560px ;">
                <el-table ref="cart" :data="cartList" style="width: 100% ;height:480px ;overflow:auto;"
                    @selection-change="handleSelect">

                    <!-- 选中框 -->
                    <el-table-column type="selection" width="50px" />
                    <!-- 商品信息 -->
                    <el-table-column label="商品信息" width="350px" align="center">
                        <template #default="scope">
                            <div style="display: flex;align-items: center; width: 320px;">
                                <el-image :src="scope.row.good.src" style="width:100px;height: 100px;"></el-image>
                                <p style="margin-left:10px ;text-align: left;color:#666666;font-size: 16px;;">{{
                                    scope.row.good.gname }}
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- 单价 -->
                    <el-table-column label="单价" width="200px" align="center">
                        <template #default="scope">

                            <p style="text-align: center;">￥{{ scope.row.good.price }}</p>
                        </template>
                    </el-table-column>
                    <!-- 数量 -->
                    <el-table-column label="数量" width="180px" align="center">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.count" style="width: 130px;" min="1"
                                @change="changeCount(scope.row.gid, scope.row.count)"></el-input-number>
                        </template>
                    </el-table-column>
                    <!-- 总价 -->
                    <el-table-column label="总价" width="180px" align="center">
                        <template #default="scope">
                            <p style="text-align: center;color:brown">￥{{ scope.row.tolPrice }}</p>
                        </template>
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column label="操作" width="120px" align="center">
                        <template #default="scope">
                            <el-button type="success" plain size="small"
                                @click="delFromCart(scope.row.good.gid);">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <el-footer>
                    <div style="display: flex; align-items: center;">
                        <p>共{{ cartList.length }}件商品，已选择{{ selection.length }}件商品，商品合计：<span
                                style="font-size: 18px;color:brown;font-weight: 1000;">
                                ￥{{ tolPrice }}</span>
                        </p>
                        <el-button type="primary" style="margin-left: 200px;" :disabled="selection.length == 0"
                            @click="createOrder()">下单结算</el-button>
                    </div>
                </el-footer>
            </el-container>
            <!-- </el-table> -->
        </el-main>
    </el-container>
</template>